// SCSS 混合宏文件

// 响应式断点混合宏
@mixin respond-to($breakpoint) {
  @if $breakpoint == 'mobile' {
    @media (max-width: #{$breakpoint-md - 1px}) {
      @content;
    }
  }
  @else if $breakpoint == 'tablet' {
    @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg - 1px}) {
      @content;
    }
  }
  @else if $breakpoint == 'desktop' {
    @media (min-width: #{$breakpoint-lg}) {
      @content;
    }
  }
  @else if $breakpoint == 'large-desktop' {
    @media (min-width: #{$breakpoint-xl}) {
      @content;
    }
  }
  @else {
    @media (max-width: #{$breakpoint}) {
      @content;
    }
  }
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 文本省略
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 居中对齐
@mixin center($position: both) {
  position: absolute;
  
  @if $position == 'vertical' {
    top: 50%;
    transform: translateY(-50%);
  }
  @else if $position == 'horizontal' {
    left: 50%;
    transform: translateX(-50%);
  }
  @else if $position == 'both' {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

// Flex 布局
@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 网格布局
@mixin grid($columns: 1fr, $rows: auto, $gap: 0) {
  display: grid;
  grid-template-columns: $columns;
  grid-template-rows: $rows;
  gap: $gap;
}

// 按钮样式
@mixin button-variant($color, $background, $border: $background) {
  color: $color;
  background-color: $background;
  border-color: $border;
  
  &:hover,
  &:focus {
    color: $color;
    background-color: darken($background, 7.5%);
    border-color: darken($border, 10%);
  }
  
  &:active {
    color: $color;
    background-color: darken($background, 10%);
    border-color: darken($border, 12.5%);
  }
  
  &.is-disabled,
  &[disabled] {
    color: $color;
    background-color: $background;
    border-color: $border;
    opacity: 0.6;
    cursor: not-allowed;
  }
}

// 输入框样式
@mixin input-variant($border-color: $border-color, $focus-color: $color-primary) {
  border-color: $border-color;
  
  &:focus {
    border-color: $focus-color;
    box-shadow: 0 0 0 2px rgba($focus-color, 0.2);
  }
  
  &.is-error {
    border-color: $color-danger;
    
    &:focus {
      box-shadow: 0 0 0 2px rgba($color-danger, 0.2);
    }
  }
}

// 卡片样式
@mixin card($padding: $card-padding, $radius: $card-border-radius, $shadow: $card-shadow) {
  background: $bg-color;
  border-radius: $radius;
  padding: $padding;
  box-shadow: $shadow;
  border: 1px solid $border-color-light;
  transition: $transition-base;
  
  &:hover {
    box-shadow: $box-shadow-lg;
    transform: translateY(-2px);
  }
}

// 渐变背景
@mixin gradient($start-color, $end-color, $direction: to right) {
  background: linear-gradient($direction, $start-color, $end-color);
}

// 三角形
@mixin triangle($size, $color, $direction) {
  width: 0;
  height: 0;
  
  @if $direction == up {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  }
  @else if $direction == down {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
  }
  @else if $direction == left {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
  }
  @else if $direction == right {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
  }
}

// 加载动画
@mixin loading-spinner($size: 20px, $color: $color-primary, $border-width: 2px) {
  width: $size;
  height: $size;
  border: $border-width solid rgba($color, 0.2);
  border-top: $border-width solid $color;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 脉冲动画
@mixin pulse($color: $color-primary) {
  animation: pulse 2s infinite;
  
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba($color, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba($color, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba($color, 0);
    }
  }
}

// 淡入动画
@mixin fade-in($duration: 0.3s, $delay: 0s) {
  animation: fadeIn $duration ease-in-out $delay;
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

// 滑入动画
@mixin slide-in($direction: up, $distance: 20px, $duration: 0.3s, $delay: 0s) {
  animation: slideIn#{capitalize($direction)} $duration ease-out $delay;
  
  @if $direction == up {
    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY($distance);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
  @else if $direction == down {
    @keyframes slideInDown {
      from {
        opacity: 0;
        transform: translateY(-$distance);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
  @else if $direction == left {
    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-$distance);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }
  @else if $direction == right {
    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX($distance);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }
}

// 缩放动画
@mixin scale-in($scale: 0.8, $duration: 0.3s, $delay: 0s) {
  animation: scaleIn $duration ease-out $delay;
  
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale($scale);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

// 悬浮效果
@mixin hover-lift($distance: 4px, $shadow: $box-shadow-lg) {
  transition: $transition-base;
  
  &:hover {
    transform: translateY(-$distance);
    box-shadow: $shadow;
  }
}

// 图片适配
@mixin img-fit($fit: cover) {
  width: 100%;
  height: 100%;
  object-fit: $fit;
  object-position: center;
}

// 滚动条样式
@mixin scrollbar($width: 8px, $track-color: $bg-color-light, $thumb-color: $border-color) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }
  
  &::-webkit-scrollbar-track {
    background: $track-color;
    border-radius: $width / 2;
  }
  
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $width / 2;
    
    &:hover {
      background: darken($thumb-color, 10%);
    }
  }
}

// 占位符样式
@mixin placeholder($color: $text-color-placeholder) {
  &::placeholder {
    color: $color;
    opacity: 1;
  }
  
  &::-webkit-input-placeholder {
    color: $color;
  }
  
  &::-moz-placeholder {
    color: $color;
    opacity: 1;
  }
  
  &:-ms-input-placeholder {
    color: $color;
  }
}

// 选择文本样式
@mixin selection($background: rgba($color-primary, 0.2), $color: $text-color-primary) {
  &::selection {
    background: $background;
    color: $color;
  }
  
  &::-moz-selection {
    background: $background;
    color: $color;
  }
}

// 隐藏元素（保持可访问性）
@mixin visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

// 重置按钮样式
@mixin button-reset {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: none;
  outline: none;
}

// 重置列表样式
@mixin list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

// 固定宽高比
@mixin aspect-ratio($width, $height) {
  position: relative;
  
  &::before {
    content: '';
    display: block;
    padding-top: percentage($height / $width);
  }
  
  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

// 网格容器
@mixin grid-container($columns: 12, $gap: $spacing-md) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

// 网格项目
@mixin grid-item($start: auto, $end: auto) {
  grid-column-start: $start;
  grid-column-end: $end;
}

// 媒体查询简写
@mixin media($min-width: null, $max-width: null) {
  @if $min-width and $max-width {
    @media (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  }
  @else if $min-width {
    @media (min-width: $min-width) {
      @content;
    }
  }
  @else if $max-width {
    @media (max-width: $max-width) {
      @content;
    }
  }
}

// 字体图标
@mixin icon($content, $font-family: 'element-icons') {
  font-family: $font-family;
  content: $content;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 背景图片
@mixin bg-img($url, $size: cover, $position: center, $repeat: no-repeat) {
  background-image: url($url);
  background-size: $size;
  background-position: $position;
  background-repeat: $repeat;
}

// 文本渐变
@mixin text-gradient($start-color, $end-color, $direction: to right) {
  background: linear-gradient($direction, $start-color, $end-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

// 毛玻璃效果
@mixin glass-effect($blur: 10px, $opacity: 0.8) {
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  background: rgba(255, 255, 255, $opacity);
}

// 阴影层次
@mixin elevation($level) {
  @if $level == 1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  @else if $level == 2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
  @else if $level == 3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  }
  @else if $level == 4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  }
  @else if $level == 5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
  }
}